<template>
  <view class="pages">
    <h-nav-bar :fixed="true" backgroundColor="#F5F0FC">
      <view class="topCen" @click="openRl">
        {{
          dateTime == newTime
            ? '今天'
            : dateTime == preTime
            ? '昨天'
            : dateTime == nextTime
            ? '明天'
            : dateTime
        }}

        <image
          v-show="timeShow"
          src="@/static/yunchan/weight/shanga.png"
          class="topCen_img"
        ></image>
        <image v-show="!timeShow" src="@/static/yunchan/weight/xiaa.png" class="topCen_img"></image>
      </view>
      <template #right>
        <image
          class="head_img"
          v-show="!isShow && (itemNum > 0 || sportList?.length > 0)"
          src="@/static/yunchan/weight/fx.png"
          @click="toDetail"
        ></image>
        <image
          class="head_img"
          v-show="!isShow"
          src="@/static/yunchan/weight/sz.png"
          @click="navigateTo('/pregnancy/weight-management/diet-record/reminder')"
        ></image>
      </template>
    </h-nav-bar>
    <view
      class="sec_head"
      @touchstart="touchStart"
      @touchend="touchEndWeek"
      @touchmove="handleMove"
      :style="{ top: statusHeight + 80 + 'rpx' }"
    >
      <view class="sec_head_box" :style="{ transform: 'translate(' + calenderMove.x + 'px' }">
        <view
          class="sec_head_l"
          v-for="(item, index) in weekList"
          :key="index"
          style="color: #333"
          >{{ item.title }}</view
        >
        <view
          class="sec_head_l"
          v-for="(item, index) in weekList"
          :key="index"
          :style="[
            { color: dateTime == item.value ? '#fff' : '#333' },
            { background: dateTime == item.value ? '#8E70FF' : '' },
          ]"
          @click="checkWeek(item, index)"
          >{{ item.title }}</view
        >
        <view
          class="sec_head_l"
          v-for="(item, index) in weekList"
          :key="index"
          style="color: #333"
          >{{ item.title }}</view
        >
      </view>
    </view>
    <view class="section">
      <view class="sec_none" v-show="itemNum == 0 && sportList?.length == 0 && !loading">
        <view class="sec_none_text">还没有记录哦~</view>
        <view class="sec_none_con" v-if="!isShow">
          <image class="sec_none_con_img" src="@/static/yunchan/weight/aaa.png"></image>
          <view class="sec_none_con_text">点击底部按钮添加记录</view>
        </view>
      </view>
      <view class="sex_meal" v-show="isShow == 'food' || !isShow">
        <view
          class="sex_meal_list"
          v-for="(item, index) in itemList"
          :key="index"
          v-show="item.list.length > 0"
        >
          <view class="sex_meal_list_title">{{ item?.mealName }}</view>
          <view class="sex_meal_list_box">
            <view
              class="sex_meal_list_box_list"
              v-for="(items, indexs) in item?.list"
              :key="indexs"
              :id="index + ',' + indexs"
              @touchstart="touchStart"
              @touchend="touchEndTab"
              @click="toEdit(index, indexs, items, item?.mealName)"
            >
              <image :src="items?.icon" class="sex_meal_list_box_list_img"></image>
              <view class="sex_meal_list_box_list_box">
                <view class="sex_meal_list_box_list_box_l">
                  <view class="sex_meal_list_box_list_box_l_t">{{ items?.name }}</view>
                  <view class="sex_meal_list_box_list_box_l_b"
                    >{{ items?.num }}{{ items?.unit }}</view
                  >
                </view>
                <view class="sex_meal_list_box_list_box_r" v-show="!isShow">
                  <image src="@/static/shop/right.png"></image>
                </view>
                <view
                  class="sex_meal_list_box_list_box_del"
                  v-show="items?.del && !isShow"
                  @click.stop="toDel(index, indexs, items?.id)"
                  >删除</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="sex_meal" v-show="isShow == 'sport' || !isShow">
        <view class="sex_meal_list" v-show="sportList?.length > 0">
          <view class="sex_meal_list_title">运动</view>
          <view class="sex_meal_list_box">
            <view
              class="sex_meal_list_box_list"
              v-for="(items, indexs) in sportList"
              :key="indexs"
              :id="indexs"
              @touchstart="touchStart"
              @touchend="touchEndSportTab"
              @click="toEditSport(indexs, items)"
            >
              <image :src="items?.icon" class="sex_meal_list_box_list_img"></image>
              <view class="sex_meal_list_box_list_box">
                <view class="sex_meal_list_box_list_box_l">
                  <view class="sex_meal_list_box_list_box_l_t">{{ items?.name }}</view>
                  <view class="sex_meal_list_box_list_box_l_b"
                    >{{ items?.num }}{{ items?.unit }}</view
                  >
                </view>
                <view class="sex_meal_list_box_list_box_r" v-show="!isShow">
                  <image src="@/static/shop/right.png"></image>
                </view>
                <view
                  class="sex_meal_list_box_list_box_del"
                  v-show="items?.del && !isShow"
                  @click.stop="toSportDel(indexs, items?.id)"
                  >删除</view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
      <h-line height="180"></h-line>
    </view>
    <view class="foot" v-show="!isShow">
      <view class="foot_l" v-for="(item, index) in footList" :key="index" @click="bindFoot(index)">
        <!--<image class="foot_l_img" :src="item?.icons" v-if="footIndex==index"></image>-->
        <image class="foot_l_img" :src="item?.icon"></image>
        <view class="foot_l_text">{{ item?.title }}</view>
      </view>
    </view>

    <view
      class="date_box"
      v-if="timeShow"
      :style="{ top: statusHeight + 80 + 'rpx' }"
      @click="timeShow = false"
    >
      <view class="date_box_con" @click.stop="">
        <h-uni-calendar
          :date="dateTime"
          :selected="info?.selected"
          :show-month="false"
          :startDate="startDate"
          :endDate="endDate"
          @change="changeDay"
          @backToday="backToday"
        />
      </view>
    </view>
    <!-- 分享 -->
    <!--<h-share ref="shareRef" :showLh="false"></h-share>-->
    <h-share ref="shareRef" :showLh="false" :isDoctor="true" @gotoChat="gotoChatShare"></h-share>
    <h-login ref="login"></h-login>

    <u-popup :show="editShow" mode="bottom" @close="editShow = false" closeable :round="10">
      <view class="add_box">
        <view class="topCena">
          <view class="head_data" style="font-size: 28rpx">
            <view class="uni-input">
              {{ formatDate(new Date(dateTime), 'MM月DD日') }} {{ editTitle }}
            </view>
          </view>
        </view>
        <h-num-keyboard
          type="meal"
          :title="editDetail?.name"
          :imgUrl="editDetail?.icon"
          :num="mealNum"
          :unit="editDetail?.unit"
          @bind="bindNum"
        ></h-num-keyboard>
      </view>
    </u-popup>
    <u-popup
      :show="editSportShow"
      mode="bottom"
      @close="editSportShow = false"
      closeable
      :round="10"
    >
      <view class="add_box">
        <view class="topCena">
          <view class="head_data" style="font-size: 28rpx">
            <view class="uni-input">
              {{ formatDate(new Date(dateTime), 'MM月DD日') }}
            </view>
          </view>
        </view>
        <h-num-keyboard
          type="sport"
          :title="editSportDetail?.name"
          :imgUrl="editSportDetail?.icon"
          :num="mealSportNum"
          :unit="editSportDetail?.unit"
          @bind="bindSportNum"
        ></h-num-keyboard>
      </view>
    </u-popup>

    <!-- 加餐弹框 -->
    <u-popup :show="showExtraMeal" :round="10" mode="bottom" @close="showExtraMeal = false">
      <view class="ExtraMeal_box">
        <view
          class="ExtraMeal_list"
          v-for="(item, index) in extraMealList"
          :key="index"
          @click="addExtraMeal(index)"
          >{{ item }}</view
        >
        <view class="cancel" @click="showExtraMeal = false">取消</view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import { formatDate } from '@/utils/utils'
import { navigateTo, showToast, navigateBack, redirectTo } from '@/utils'
import dayjs from 'dayjs'
import {
  onLoad,
  onPullDownRefresh,
  onReachBottom,
  onReady,
  onShow,
  onPageScroll,
  onUnload,
  onHide,
  onBackPress,
} from '@dcloudio/uni-app'
import {
  ycDietDailyDiet,
  ycDietRecordStartDate,
  ycDietDelRecord,
  ycDietDateList,
  ycSportDateList,
  ycDietEditDiet,
  ycDietDailySport,
  ycSportEditDiet,
  ycSportDelRecord,
} from '@/api/weight/index.js'
import { useMemberStore } from '@/stores'
const login = ref(null) // 登录组件实例
const store = useMemberStore()
var token = store?.token
const statusHeight = ref(0)
const loading = ref(false)
const timeShow = ref(false)
const calenderMove = ref({
  x: 0,
  y: 0,
})
const weekList = ref([
  {
    title: '日',
    value: '',
  },
  {
    title: '一',
    value: '',
  },
  {
    title: '二',
    value: '',
  },
  {
    title: '三',
    value: '',
  },
  {
    title: '四',
    value: '',
  },
  {
    title: '五',
    value: '',
  },
  {
    title: '六',
    value: '',
  },
])
const dateTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
const weekTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
const newTime = ref(formatDate(new Date(), 'YYYY-MM-DD'))
const preTime = ref('')
const nextTime = ref('')

function getUp() {
  var tt = new Date()
  var ti = tt.getTime() + 1000 * 60 * 60 * 24 * 1
  nextTime.value = formatDate(ti, 'YYYY-MM-DD')
  var tc = tt.getTime() - 1000 * 60 * 60 * 24 * 1
  preTime.value = formatDate(tc, 'YYYY-MM-DD')
}
const dayList = ref([1, 2, 3, 4, 5, 6, 7])
const shareRef = ref(null)
const info = ref({
  lunar: true,
  range: true,
  insert: false,
  selected: [],
})
const footList = ref([
  {
    title: '早餐',
    icon: '/static/yunchan/weight/foot/a.png',
    icons: '/static/yunchan/weight/foot/aa.png',
  },
  {
    title: '午餐',
    icon: '/static/yunchan/weight/foot/b.png',
    icons: '/static/yunchan/weight/foot/ba.png',
  },
  {
    title: '晚餐',
    icon: '/static/yunchan/weight/foot/c.png',
    icons: '/static/yunchan/weight/foot/ca.png',
  },
  {
    title: '加餐',
    icon: '/static/yunchan/weight/foot/d.png',
    icons: '/static/yunchan/weight/foot/da.png',
  },
  {
    title: '运动',
    icon: '/static/yunchan/weight/foot/e.png',
    icons: '/static/yunchan/weight/foot/ea.png',
  },
])
const itemList = ref([])
const sportList = ref([])
const footIndex = ref(10)
const startDate = ref('')
const endDate = ref('')
const editShow = ref(false)
const editDetail = ref({})
const editTitle = ref('')
const editIndex = ref(0)
const editIndexs = ref(0)
const mealNum = ref(0)
const isShow = ref('')
const editSportShow = ref(false)
const editSportIndex = ref(0)
const editSportDetail = ref({})
const mealSportNum = ref(0)
const showExtraMeal = ref(false)
const itemNum = ref(0)
const extraMealList = ref(['早加餐', '午加餐', '晚加餐'])
//uid
const userId = ref('')
onLoad((o) => {
  if (o?.time) {
    dateTime.value = o?.time || newTime.value
    weekTime.value = o?.time || newTime.value
  }
  if (o.isshow) {
    isShow.value = o.isshow
  }
  if (o.day) {
    getDayTime(Number(o.day) - 1)
  } else {
    getSectionTime()
  }
  if(o?.uid){
    userId.value = o.uid
  }
  getUp()
  getList()
  getWeekList(newTime.value)
  getTimeList()
})
onShow(() => {
  getList()
})
onReady(() => {
  uni.getSystemInfo({
    success: (e) => {
      statusHeight.value = e.statusBarHeight * 2
    },
  })
})
onBackPress((o) => {
  console.log('from:' + o)
  return false
})

function openRl() {
  timeShow.value = !timeShow.value
}
async function getTimeList() {
  var year = formatDate(new Date(), 'YYYY')
  var month = formatDate(new Date(), 'MM')
  var day = formatDate(new Date(year, month, 0), 'DD')
  var res = await ycDietDateList({
    uid: userId.value,
    start_date: year + '-' + month + '-01',
    end_date: year + '-' + month + '-' + day,
  })
  var list = res.data.data
  var arr = []
  for (var i in list) {
    if (list[i].is_record) {
      arr.push({
        date: list[i].date,
      })
    }
  }
  var ress = await ycSportDateList({
    uid: userId.value,
    start_date: year + '-' + month + '-01',
    end_date: year + '-' + month + '-' + day,
  })
  var lists = ress.data.data
  for (var i in lists) {
    if (lists[i].is_record) {
      arr.push({
        date: lists[i].date,
      })
    }
  }
  info.value.selected = arr
}
async function getSectionTime() {
  var res = await ycDietRecordStartDate({
    uid: userId.value,
    type: 1,
  })
  let date = res.data.date ? res.data.date : newTime.value
  var tYear = new Date(date).getFullYear()
  var startTime = tYear + '-01-01'
  var eYear = new Date(newTime.value).getFullYear()
  var endTime = eYear + '-12-31'
  startDate.value = startTime
  endDate.value = endTime
}

function jianDate(Ttime, num) {
  var tt = new Date(Ttime)
  var ti = tt.getTime() - 1000 * 60 * 60 * 24 * num
  var time = new Date(ti)
  var y = time.getFullYear()
  var m = time.getMonth() + 1
  var d = time.getDate()
  if (m < 10) {
    m = '0' + m
  }
  if (d < 10) {
    d = '0' + d
  }
  var date = y + '-' + m + '-' + d
  return date
}
async function getDayTime(num) {
  endDate.value = formatDate(new Date(dateTime.value), 'YYYY-MM-DD')
  startDate.value = jianDate(endDate.value, num)
}

//加餐
function addExtraMeal(index) {
  showExtraMeal.value = false
  let today = formatDate(Date.now(), 'YYYY-MM-DD')
  redirectTo(`/pregnancys/weight-management/diet-record/index?mealIndex=${index + 3}&time=${today}`)
}
function bindFoot(index) {
  footIndex.value = index
  if (index == 4) {
    redirectTo(
      '/pregnancys/weight-management/sport-record/index?time=' + dateTime.value + '&isAdd=1',
    )
  } else if (index == 3) {
    showExtraMeal.value = true
  } else {
    redirectTo(
      '/pregnancys/weight-management/diet-record/index?mealIndex=' +
        index.toString() +
        '&time=' +
        dateTime.value +
        '&isAdd=1',
    )
  }
}

function getWeekList(time) {
  let date = new Date(time)
  let Time = date.getTime()
  let day = date.getDay()
  let oneDayTime = 24 * 60 * 60 * 1000
  let a = Time - (day - 0) * oneDayTime
  let b = Time - (day - 1) * oneDayTime
  let c = Time - (day - 2) * oneDayTime
  let d = Time - (day - 3) * oneDayTime
  let e = Time - (day - 4) * oneDayTime
  let f = Time - (day - 5) * oneDayTime
  let g = Time - (day - 6) * oneDayTime
  let aa = formatDate(new Date(a), 'YYYY-MM-DD')
  let bb = formatDate(new Date(b), 'YYYY-MM-DD')
  let cc = formatDate(new Date(c), 'YYYY-MM-DD')
  let dd = formatDate(new Date(d), 'YYYY-MM-DD')
  let ee = formatDate(new Date(e), 'YYYY-MM-DD')
  let ff = formatDate(new Date(f), 'YYYY-MM-DD')
  let gg = formatDate(new Date(g), 'YYYY-MM-DD')
  var week = [aa, bb, cc, dd, ee, ff, gg]
  weekList.value[0].value = aa
  weekList.value[1].value = bb
  weekList.value[2].value = cc
  weekList.value[3].value = dd
  weekList.value[4].value = ee
  weekList.value[5].value = ff
  weekList.value[6].value = gg
}

function compareDates(date1, date2) {
  var time1 = new Date(date1).getTime()
  var time2 = new Date(date2).getTime()

  if (time1 > time2) {
    return 1
  } else if (time1 < time2) {
    return -1
  } else {
    return 0
  }
}

function checkWeek(row, index) {
  var time = weekList.value[index].value
  var a = compareDates(time, startDate.value)
  var b = compareDates(time, endDate.value)
  if (a >= 0 && b <= 0) {
    dateTime.value = weekList.value[index].value
    getList()
  }
}

// 打开分享
function toDetail() {
  if (store.token) {
    shareRef.value.open()
  } else {
    login.value.open()
  }
}

//分享到医生
function gotoChatShare(i) {
  if (sportList.value.length > 0 || itemList.value.length > 0) {
    navigateTo(
      `/pregnancys/index/doctor-chat?doctor_id=${i?.doctor_id}&avatar=${i?.avatar}&name=${i?.dname}&id=${i?.id}&date=${dateTime.value}&type=2`,
    )
  } else {
    showToast('当前日期没有记录')
  }
}
function getList() {
  loading.value = true
  getMealList()
  getSportList()
}
async function getMealList() {
  var num = 0
  var res = await ycDietDailyDiet({
    uid: userId.value,
    date: dateTime.value,
  })
  var list = res.data?.data || []
  for (var i in list) {
    num += list[i].list.length || 0
  }
  itemNum.value = num
  itemList.value = list
  loading.value = false
}
async function getSportList() {
  var res = await ycDietDailySport({
    uid: userId.value,
    date: dateTime.value,
  })
  sportList.value = res.data?.data || []
  loading.value = false
}

function toEdit(index, indexs, row, title) {
  if (isShow.value) {
    return false
  }
  editShow.value = true
  editIndex.value = index
  editIndexs.value = indexs
  editDetail.value = row
  editTitle.value = title
  mealNum.value = row.num.toString()
}

function toEditSport(index, row) {
  if (isShow.value) {
    return false
  }
  editSportShow.value = true
  editSportIndex.value = index
  editSportDetail.value = row
  mealSportNum.value = row.num.toString()
}

async function bindNum(e) {
  editDetail.value.unit = e.unit
  editDetail.value.num = e.num
  mealNum.value = ''
  var res = await ycDietEditDiet({
    id: editDetail.value.id,
    num: Number(e.num),
    unit: e.unit,
    uid: userId.value,
  })
  if (res.code == 200) {
    var a = editIndex.value
    var b = editIndexs.value
    itemList.value[a].list[b] = editDetail.value
    editShow.value = false
    getMealList()
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}

async function bindSportNum(e) {
  mealSportNum.value = ''
  var res = await ycSportEditDiet({
    id: editSportDetail.value.id,
    num: Number(e.num),
    unit: e.unit,
    uid: userId.value,
  })
  if (res.code == 200) {
    var a = editSportIndex.value
    sportList.value[a] = editSportDetail.value
    editSportShow.value = false
    getSportList()
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}

var startX = 0

function touchStart(e) {
  if (e.touches.length == 1) {
    //设置触摸起始点水平方向位置
    startX = e.touches[0].clientX
  }
}

function touchEndTab(e) {
  var index = e.currentTarget.id.split(',')[0]
  var indexs = e.currentTarget.id.split(',')[1]
  if (e.changedTouches.length == 1) {
    //手指移动结束后水平位置
    var endX = e.changedTouches[0].clientX
    let diff = endX - startX
    if (Math.abs(diff) > 40) {
      if (diff > 0) {
        console.log('右滑...')
        itemList.value[index].list[indexs].del = false
      } else {
        console.log('左滑...')
        itemList.value[index].list[indexs].del = true
      }
    }
  }
}

function touchEndSportTab(e) {
  var index = e.currentTarget.id.split(',')[0]
  var indexs = e.currentTarget.id.split(',')[1]
  if (e.changedTouches.length == 1) {
    //手指移动结束后水平位置
    var endX = e.changedTouches[0].clientX
    let diff = endX - startX
    if (Math.abs(diff) > 40) {
      if (diff > 0) {
        console.log('右滑...')
        sportList.value[index].del = false
      } else {
        console.log('左滑...')
        sportList.value[index].del = true
      }
    }
  }
}
function jiaDate(num) {
  var tt = new Date(weekTime.value)
  var ti = tt.getTime() + 1000 * 60 * 60 * 24 * num
  var time = formatDate(ti, 'YYYY-MM-DD')
  weekTime.value = time
  getWeekList(weekTime.value)
}
function handleMove(e) {
  var left = e?.changedTouches[0].clientX
  calenderMove.value.x = left - startX
}

function touchEndWeek(e) {
  if (e.changedTouches.length == 1) {
    //手指移动结束后水平位置
    var endX = e.changedTouches[0].clientX
    let diff = endX - startX
    if (Math.abs(diff) > 40) {
      if (diff > 0) {
        console.log('右滑..11.')
        jiaDate(-7)
      } else {
        console.log('左滑..22.')
        jiaDate(7)
      }
    }
  }
  calenderMove.value.x = 0
}

async function toDel(index, indexs, id) {
  var res = await ycDietDelRecord({
    id: id,
    uid: userId.value,
  })
  if (res.code == 200) {
    itemList.value[index].list.splice(indexs, 1)
    if (itemList.value[index].list.length == 0) {
      itemList.value.splice(index, 1)
    }
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}

async function toSportDel(index, id) {
  var res = await ycSportDelRecord({
    id: id,
    uid: userId.value,
  })
  if (res.code == 200) {
    sportList.value.splice(index, 1)
  }
  uni.showToast({
    title: res.msg,
    icon: 'none',
    duration: 2000,
  })
}

function changeDay(e) {
  dateTime.value = e.fulldate
  weekTime.value = e.fulldate
  getWeekList(dateTime.value)
  timeShow.value = false
  getList()
}

function backToday() {
  timeShow.value = false
  dateTime.value = newTime.value
  weekTime.value = newTime.value
  getWeekList(dateTime.value)
  getList()
}
</script>

<style lang="scss">
page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.pages {
  min-height: 100vh;
  background: linear-gradient(180deg, #f5effd 0%, #f6f6f6 100vh);
}

.topCen {
  height: 56rpx;
  background: linear-gradient(90deg, #cb9fff 0%, #a28aff 100%);
  border-radius: 28rpx;
  margin: 12rpx auto;
  padding: 0 30rpx;
  line-height: 56rpx;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36rpx;
  color: #ffffff;
  .topCen_img {
    width: 20rpx;
    height: 20rpx;
    margin-left: 16rpx;
    position: relative;
    top: -4rpx;
  }
}

.head_img {
  width: 42rpx;
  height: 40rpx;
  margin: 0 10rpx;
}

.add_box {
  .topCena {
    width: 100%;
    height: 100%;
    z-index: 1;
    padding: 10rpx 0;
    box-sizing: border-box;
    .head_data {
      width: 100%;
      height: 64rpx;
      font-size: 36rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #333333;
      line-height: 64rpx;
      text-align: center;
      .head_data_img {
        width: 18rpx;
        height: 12rpx;
        margin-left: 10rpx;
        position: relative;
        top: -6rpx;
      }
    }
  }
}

.date_box {
  position: fixed;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  z-index: 11;
  .date_box_con {
    background: #ffffff;
    padding-bottom: 30rpx;
    border-radius: 0 0 20rpx 20rpx;
  }
}

.sec_head {
  box-sizing: border-box;
  padding: 15rpx 30rpx;
  background: #f5f0fc;
  width: 100%;
  overflow: hidden;
  z-index: 10;
  position: sticky;
  left: 0;
  .sec_head_l {
    width: 58rpx;
    height: 58rpx;
    border-radius: 16rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 36rpx;
    line-height: 58rpx;
    text-align: center;
  }
  .sec_head_box {
    width: 300%;
    height: 58rpx;
    overflow: hidden;
    margin-left: -690rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.section {
  .sec_none {
    box-sizing: border-box;
    padding: 30rpx;
    .sec_none_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #000000;
      line-height: 50rpx;
      padding: 60rpx;
      text-align: center;
    }
    .sec_none_con {
      width: 690rpx;
      height: 328rpx;
      border-radius: 30rpx;
      border: 1rpx dashed #999999;
      text-align: center;
      box-sizing: border-box;
      .sec_none_con_img {
        width: 212rpx;
        height: 193rpx;
        margin-top: 40rpx;
      }
      .sec_none_con_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20rpx;
        color: #999999;
        line-height: 30rpx;
        text-align: center;
        padding: 23rpx;
      }
    }
  }
  .sex_meal {
    .sex_meal_list {
      width: 702rpx;
      background: #ffffff;
      border-radius: 10rpx;
      margin: 10rpx auto;
      box-sizing: border-box;
      padding: 0 20rpx;
      .sex_meal_list_title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        text-align: left;
        padding-top: 20rpx;
      }
      .sex_meal_list_box {
        .sex_meal_list_box_list {
          border-bottom: 2rpx solid #f6f6f6;
          padding: 20rpx 0;
          position: relative;
          overflow: hidden;
          .sex_meal_list_box_list_img {
            width: 83rpx;
            height: 83rpx;
            border-radius: 18rpx;
            float: left;
          }
          .sex_meal_list_box_list_box {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            width: 570rpx;
            float: right;
            .sex_meal_list_box_list_box_l {
              max-width: 500rpx;
              .sex_meal_list_box_list_box_l_t {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                line-height: 40rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
              .sex_meal_list_box_list_box_l_b {
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 24rpx;
                color: #666666;
                line-height: 28rpx;
                line-height: 34rpx;
                margin-top: 9rpx;
              }
            }
            .sex_meal_list_box_list_box_r {
              width: 44rpx;
              padding: 25rpx 0;
              image {
                width: 24rpx;
                height: 24rpx;
              }
            }
            .sex_meal_list_box_list_box_del {
              width: 96rpx;
              height: 83rpx;
              background: #da180a;
              position: absolute;
              top: 20rpx;
              right: 0;
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 28rpx;
              color: #ffffff;
              line-height: 83rpx;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

.foot {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .foot_l {
    width: 20%;
    text-align: center;
    .foot_l_img {
      width: 50rpx;
      height: 50rpx;
      margin-top: 30rpx;
    }
    .foot_l_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;
      text-align: center;
    }
  }
}

//加餐弹窗
.ExtraMeal_box {
  margin: 10rpx auto;
  .ExtraMeal_list {
    width: 686rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    border-bottom: 2rpx solid #f6f6f6;
    font-size: 32rpx;
    color: #666666;
  }
  .cancel {
    width: 686rpx;
    height: 100rpx;
    text-align: center;
    line-height: 100rpx;
    font-size: 32rpx;
    color: #333333;
  }
}
</style>
